<template>
    <div class="confim_order">
        <div class="content">
            <li v-for="item in getCheckShopList" :key="item.id">
                <img :src="$target + item.productImg">
                <span>{{item.productName}}</span>
                <span>{{item.price}}元 × {{item.num}}</span>
                <span class="total">{{item.price*item.num}}元</span>
            </li>
            <button @click="toShop">结算</button>
        </div>
    </div>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'
    export default {
        name: "ConfimOrder",
        data(){
            return {}
        },
        created() {
            console.log(this.getCheckShopList);
        },
        computed:{
            ...mapGetters(["getCheckShopList"])
        },
        methods:{
            ...mapActions(["toShop"])
        }
    }
</script>

<style scoped>
    .confim_order {
        background: #eee;
        width: 100%;
        padding: 20px 0;
    }
    .content {
        width: 1225px;
        background: #ffff;
        margin: 0 auto;
    }
  img {
      width: 30px;
      height: 30px;
  }
    .total{
        color: #ff6700;
    }
</style>